<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单canvas</title>
    <script src="js/simpleCanvas.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

        #canvas_div {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="canvas_div">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        let simple = new SimpleCanvas("canvas");
        let back = new Box(0, 0, window.innerWidth, window.innerHeight);
        back.c = "#444"
        let box = new Box(200, 200, 200, 200);
        box.c = getRandomColor()
        box.click = function (e) {
            box.x -= 20;
        }
        box.keyDown = function (e) {
            if (e.key == "w") {
                box.y -= 10;
            } else if (e.key == "a") {
                box.x -= 10;
            } else if (e.key == "s") {
                box.y += 10;
            } else if (e.key == "d") {
                box.x += 10;
            }
        }

        // let box2 = new Box(400, 200, 200, 200);
        // box2.c = getRandomColor()
        // box2.keyDown = function (e) {
        //     console.log(e.key)
        //     if (e.key == "ArrowUp") {
        //         box2.y -= 10;
        //     } else if (e.key == "ArrowLeft") {
        //         box2.x -= 10;
        //     } else if (e.key == "ArrowDown") {
        //         box2.y += 10;
        //     } else if (e.key == "ArrowRight") {
        //         box2.x += 10;
        //     }
        // }

        simple.update();
    </script>
<Box>6666</Box>
</body>

</html>